<template>
  <div class="tab">
    <div
      v-for="item in routerList"
      :key="item.id"
      class="tab-item"
      :class="{ active: route.path === item.path }"
      @touchend="goIndex(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
type TRouter = {
  id: string;
  name: string;
  path: string;
  icon: string;
};
const router = useRouter();
const route = useRoute();
const routerList: TRouter[] = [
  { id: "1", name: "首页", path: "/index-h5", icon: "" },
  { id: "2", name: "留言", path: "/advice-h5", icon: "" },
  { id: "3", name: "聊天", path: "/chat-h5", icon: "" },
  { id: "4", name: "资源", path: "/source-h5", icon: "" },
  { id: "5", name: "我的", path: "/me-h5", icon: "" },
];
const goIndex: (T: TRouter) => void = ({ path }) => {
  router.push(path);
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "advice";
  src: url("../assets/font/advice (2).woff");
  src: url("../assets/font/advice (2).woff") format("woff");
}

@font-face {
  font-family: "advice1";
  src: url("../assets/font/2fa9c4ff5312d3b187d6c29ebec5a1f2.woff");
  src: url("../assets/font/2fa9c4ff5312d3b187d6c29ebec5a1f2.woff") format("woff");
}
@font-face {
  font-family: "advice1";
  src: url("../assets/font/f2cf821cada34f187f964652c2b0e522.woff");
  src: url("../assets/font/f2cf821cada34f187f964652c2b0e522.woff") format("woff");
}
@font-face {
  font-family: "advice1";
  src: url("../assets/font/fba3cceeb411bd5f1856804fe4207b51.woff");
  src: url("../assets/font/fba3cceeb411bd5f1856804fe4207b51.woff") format("woff");
}
@font-face {
  font-family: "advice1";
  src: url("../assets/font/06e0c7085ff67d99c7b985951e21394a.woff");
  src: url("../assets/font/06e0c7085ff67d99c7b985951e21394a.woff") format("woff");
}

.tab {
  font-family: "advice", "advice1";
  display: flex;
  justify-content: space-between;
  background-color: #ffffff88;
  border-top: 1px solid #999;
  &-item {
    text-align: center;
    width: 100%;
    line-height: 50px;
  }
}
.active {
  color: red;
}
</style>
